<template>
	<view class="dashed-box">
		<!-- 动态生成签名栏 -->
		<view v-for="(item, index) in signList" :key="index" class="custom-title">
			<text style="margin-right: 20px;color: black;font-size: 17px;font-weight: bold;">
				{{ getRoleText(item.role) }}签名(点击右侧)
			</text>
			<signInput bgColor="#ffffff" :ref="`sign_${index}`" :header="header" :action="action"
				@signToUrl="(e) => handleSign(e, index)"></signInput>
		</view>

		<!-- 添加更多 -->
		<view v-if="showAddButton" class="dashed-box3" @click="showRolePicker">
			<text style="font-size: 20rpx;font-weight: bold;">+点此添加更多签字栏</text>
		</view>

		<!-- 日期 -->
		<view class="custom-dateText" @click="openDatePicker">
			<text>日期:</text>
			<text class="custom-text3" @click="openDatePicker('year')">{{ checkDate.year || '编辑' }}</text>年
			<text class="custom-text3" @click="openDatePicker('month')">{{ checkDate.month || '编辑' }}</text>月
			<text class="custom-text3" @click="openDatePicker('day')">{{ checkDate.day || '编辑' }}</text>日
		</view>

		<!-- 添加日期选择弹窗 -->
		<uni-popup ref="datePopup" type="dialog">
			<uni-popup-dialog mode="base" title="选择日期" @confirm="handleDialogConfirm" @close="handleDialogClose">
				<uni-datetime-picker type="date" @change="handleDateChange" />
			</uni-popup-dialog>
		</uni-popup>


		<!-- 角色选择弹窗 -->
		<uni-popup ref="rolePopup" type="dialog">
			<uni-popup-dialog mode="base" title="选择角色" @confirm="confirmRole" @close="closeRolePopup">
				<picker :range="roleOptions" range-key="text" @change="handleRoleChange">
					<view class="picker">当前选择：{{ roleOptions[currentRoleIndex].text }}</view>
				</picker>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import signInput from "@/components/am-sign-input/am-sign-input.vue"
	export default {
		props: {
			// 初始签名列表
			initialList: {
				type: Array,
				default: () => []
			}, // 新增控制显隐的 prop
			showAddButton: {
				type: Boolean,
				default: true // 默认显示
			},

		},
		components: {
			signInput
		},
		data() {
			return {
				signList: [],
				roleOptions: [{
						value: 1,
						text: '组长'
					},
					{
						value: 2,
						text: '组员'
					},
					{
						value: 3,
						text: '观察员'
					},
					{
						value: 4,
						text: '核查人员'
					},
					{
						value: 5,
						text: '食品经营单位负责人'
					},
					
					
				],
				currentRoleIndex: 0,
				date: {},
				currentDate: '',
	action: "https://8954wg323mw0.vicp.fun/app/upload/imageFile", //上传服务器的地址
				checkDate: {
					year: '',
					month: '',
					day: ''
				},
			}
		},
		created() {
			this.signList = this.initialList.length > 0 ?
				this.initialList :
				[{
					role: 1,
					signUrl: ''
				}] // 默认一个组长
			this.date = {
				...this.initialDate
			}
		},
		methods: { // 关闭角色选择弹窗
			closeRolePopup() {
				this.$refs.rolePopup.close()
			},

			// 处理角色选择变化
			handleRoleChange(e) {
				this.currentRoleIndex = e.detail.value
			},
			getRoleText(role) {
				return this.roleOptions.find(r => r.value === role)?.text || '其他'
			},
			showRolePicker() {
				this.$refs.rolePopup.open()
			},
			confirmRole() {
				const selected = this.roleOptions[this.currentRoleIndex]
				this.signList.push({
					role: selected.value,
					signUrl: '',
					date: ''
				})
				this.$refs.rolePopup.close();
			},
			handleSign(e, index) {
				if (e.error_code && e.error_code === '201') {
					uni.showToast({
						title: e.msg,
						icon: 'none'
					})
					return
				}
				const response = JSON.parse(e.data)
				this.$set(this.signList, index, {
					...this.signList[index],
					signUrl: response.data
				})
				console.log(this.signList);
				this.$emit('update:signList', this.signList)
			},
			openDatePicker(type) {

				this.currentDate = this.getCurrentDateString();
				this.tempDate = null; // 新增临时存储
				this.$refs.datePopup.open();
			}, // 获取当前日期字符串（用于初始化）
			getCurrentDateString() {
				const date = new Date();
				return `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2,'0')}-${date.getDate().toString().padStart(2,'0')}`;
			},
			// 弹窗关闭
			handleDialogClose() {

				this.currentEditType = null;
				this.tempDate = null;
				this.$refs.datePopup.close();
			},
			// 日期变化暂存
			handleDateChange(e) {
				this.tempDate = e ? new Date(e) : null;
			},
			// 修改handleDialogConfirm方法
			handleDialogConfirm() {
				if (this.tempDate) {
					const year = this.tempDate.getFullYear();
					const month = (this.tempDate.getMonth() + 1).toString().padStart(2, '0');
					const day = this.tempDate.getDate().toString().padStart(2, '0');
					const formattedDate = `${year}-${month}-${day}`;


					const target = this.checkDate

					// 更新显示用日期对象
					target.year = year;
					target.month = month;
					target.day = day;

				}
				this.$refs.datePopup.close();
			},
		}
	}
</script>
<style scoped>
	/* 保持原有样式不变 */
	/* 虚线容器 */
	.dashed-box {
		width: 100%;
		margin: 24rpx auto;
		padding: 12rpx;
		border: 2rpx dashed #333;
		border-radius: 10rpx;
		background: #fff;
		margin-bottom: 40px;
		position: relative;

		&+.dashed-box {
			margin-top: 28rpx;
		}

		.custom-title {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 10px;
			/* 保持原有下边距 */

		}

		.custom-dateText {
			display: flex;
			margin: 20px;
			justify-content: flex-end;
			/* 子元素居左 */
		}

		.custom-text3 {
			border-bottom: 1px solid #000;
			padding-bottom: 2px;
			padding-left: 10px;
			color: #0055ff;
			font-size: 16px;

			font-weight: bold;
			padding-right: 10px;
			margin-left: 4px;
			margin-right: 4px;
		}
	}

	/* 虚线容器 */
	.dashed-box3 {
		width: 100%;
		border: 2rpx dashed #0055ff;
		border-radius: 10rpx;
		background: #e5ecff;
		height: 120px;
		/* 设置为flex布局 */
		display: flex;
		/* 水平居中 */
		justify-content: center;
		/* 垂直居中 */
		align-items: center;
	}

	.role-picker {
		background: #fff;
		height: 300rpx;
	}

	.picker-item {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
	}
</style>